import React from 'react'
import styles from './index.less'
import { useCanvasContext } from '@/store/hooks'
export default function ContextMenu({ style }) {
	const canvas = useCanvasContext()
	const copy = e => {
		e.stopPropagation()
		e.preventDefault()
		canvas.addAssemblyCms()
	}
	const de = e => {
		e.stopPropagation()
		canvas.deleteCmp()
	}
	const addCmpIndex = e => {
		e.stopPropagation()
		e.preventDefault()
		canvas.addCmpZIndex()
	}
	const deleCmpIndex = e => {
		e.stopPropagation()
		e.preventDefault()
		canvas.deleCmpZIndex()
	}
	const topCmpIndex = e => {
		e.stopPropagation()
		e.preventDefault()
		canvas.topZIndex()
	}
	const bootomCmpIndex = e => {
		e.stopPropagation()
		e.preventDefault()
		canvas.bottomZIndex()
	}
	const hasAssembly = canvas.hasAssembly()
	return (
		<ul className={styles.main} style={style}>
			<li className={styles.item} onClick={copy}>
				复制组件
			</li>
			<li className={styles.item} onClick={de}>
				删除组件
			</li>
			{!hasAssembly && (
				<>
					<li className={styles.item} onClick={addCmpIndex}>
						上移一层
					</li>
					<li className={styles.item} onClick={deleCmpIndex}>
						下移一层
					</li>
					<li className={styles.item} onClick={topCmpIndex}>
						置顶
					</li>
					<li className={styles.item} onClick={bootomCmpIndex}>
						置底
					</li>
				</>
			)}
		</ul>
	)
}
